<template>
  <ul class="wrap" :style="{ height: '20px' }">
    <li v-for="(item, index) in showArr" :key="index">
      {{ item }}
    </li>
  </ul>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      showArr: ["冷咖啡离开了杯垫", "我忍住的情绪在很后面", "拼命想挽回的从前"],
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.wrap {
  list-style: none;
  overflow: hidden;
}
.wrap li {
  list-style: 20px;
  animation: mymove 2s;
}
@keyframes mymove {
  from {
    top: 0px;
  }
  to {
    top: 200px;
  }
}
</style>
